import React, { Component, PropTypes } from 'react';
import gql from 'graphql-tag';
import { Image, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { primaryColor, screenWidth } from '../utils';

const styles = StyleSheet.create({
  container: {
    width: screenWidth/2-2
  },
  page: {
    flex: 1,
    backgroundColor: 'white'
  },
  image: {
    width: screenWidth/2-2,
    height: screenWidth/2-2
  },
  textContainer: {
    padding: 6
  },
  priceRow: {
    flexDirection: 'row',
  },
  fill: {
    flex: 1
  },
  priceText: {
    color: 'gray',
    fontSize: 14,
    flex: 1
  },
  gray: {
    color: 'gray',
    fontSize: 14,
    paddingLeft: 8
  },
  lineThrough: {
    textDecorationLine: 'line-through'
  },
  salePrice: {
    color: primaryColor
  },
  imgContainer: {
    position: 'relative'
  },
  saleContainer: {
    position: 'absolute',
    left:8,
    bottom:8,
    paddingVertical:2,
    paddingHorizontal:8,
    backgroundColor: primaryColor,
    borderRadius:15,
    borderWidth: 1,
    borderColor: primaryColor
  },
  sale: {
    color: 'white',
    fontSize: 16
  }
});

const ClothGridItem = ({chinese, cloth, onSelect}) => {
  const {imageUrl, unit, name, wash, washD, dry, dryD, iron, ironD,
    washDisplay, dryDisplay, ironDisplay} = cloth;
  return (
    <TouchableOpacity onPress={() => onSelect(cloth)}>
      <View style={styles.container}>
        <View style={styles.imgContainer}>
          <Image source={{uri: imageUrl}} style={styles.image}/>
          {(washD||dryD||ironD)>0&&<View style={styles.saleContainer}><Text style={styles.sale}>{chinese?'特卖':'SALE'}</Text></View>}
        </View>
        <View style={styles.textContainer}>
          <View style={styles.priceRow}>
            <Text style={styles.fill}>{name}</Text>
            <Text style={styles.gray}>{`${chinese?'每':'Per '}${unit}`}</Text>
          </View>
          {(wash>0)&&
            <View style={styles.priceRow}>
              <Text style={styles.priceText}>{washDisplay}</Text>
              <Text><Text style={washD?styles.lineThrough:styles.priceText}>${wash}</Text>{washD>0&&<Text style={styles.salePrice}>{` $${washD}`}</Text>}</Text>
            </View>
          }
          {(dry>0)&&
            <View style={styles.priceRow}>
              <Text style={styles.priceText}>{dryDisplay}</Text>
              <Text><Text style={dryD?styles.lineThrough:styles.priceText}>${dry}</Text>{dryD>0&&<Text style={styles.salePrice}>{` $${dryD}`}</Text>}</Text>
            </View>
          }
          {(iron>0)&&
            <View style={styles.priceRow}>
              <Text style={styles.priceText}>{ironDisplay}</Text>
              <Text><Text style={ironD?styles.lineThrough:styles.priceText}>${iron}</Text>{ironD>0&&<Text style={styles.salePrice}>{` $${ironD}`}</Text>}</Text>
            </View>
          }
        </View>
      </View>
    </TouchableOpacity>
  );
}

ClothGridItem.fragments = {
  cloth: gql`
    fragment ClothGridItem on Cloth {
      id
      unit
      imageUrl
      name
      wash
      dry
      iron
      washD
      dryD
      ironD
      washDisplay
      dryDisplay
      ironDisplay
      checkDescription
      description
    }
  `
}

export default ClothGridItem;
